<template>
  <div>
    <Navbar class="nav-bar">
      <div slot="left" class="left" @click="back">
        <img :src="backImg" alt="">
      </div>
      <div slot="center">
        <div class="titles">
          <div v-for="(title,index) in titles"
               :key="title"
               class="title-item"
               @click="titleItemClick(index)"
               :class="{selected:titleSelect(index)}">
            {{title}}
          </div>
        </div>
      </div>
    </Navbar>
  </div>
</template>

<script>

  import Navbar from 'components/common/navbar/Navbar.vue'
  // 导入图片
  import BackImg from 'assets/img/common/back.svg'

  export default {
    name: "HomeDetailNav",
    data:function () {
      return {
        backImg:BackImg,
        titles:['商品', '参数', '评论', '推荐'],
        selectIndex:0
      }
    },
    created() {

    },
    components:{
      Navbar
    },
    methods:{
      titleItemClick(index){

        this.selectIndex = index;
      },
      titleSelect(index){

        return this.selectIndex == index
      },
      back(){

        this.$router.go(-1);
      }
    }
  }
</script>

<style scoped>

  .titles{
    display: flex;
  }

  .title-item{

    flex: 1;
  }

  .nav-bar{

    font-size: 13px;
  }

  .nav-bar .left img{

    padding-top: 10px;
  }

  .selected{

    color: var(--color-tint);
    border-bottom: 1px solid var(--color-tint);
  }


</style>
